<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    width="550px"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="物料分类" prop="category">
        <el-select
          v-model="form.category"
          value-key="fid"
          placeholder="请选择物料分类"
          @change="selectCategoryFun($event)"
        >
          <el-option
            v-for="item in categories"
            :key="item.fid"
            :label="item.fname"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="物料"
        prop="product"
        :element-loading-text="elementLoadingText"
      >
        <el-select
          v-model="form.product"
          value-key="fnumber"
          filterable
          :filter-method="filterMethod"
          placeholder="请选择物料"
          @visible-change="visibleChange"
          @change="selectProductFun($event)"
        >
          <el-option
            v-for="item in filterProducts"
            :key="item.fnumber"
            :label="item.fname"
            :value="item"
          >
            <span style="float: left">{{ item.fname }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">
              {{ item.fnumber }}
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input
          v-model.trim="form.specName"
          disabled
          placeholder="规格型号"
        ></el-input>
      </el-form-item>
      <el-form-item label="基本单位">
        <el-input
          v-model.trim="form.fbaseUnitIdfname"
          disabled
          placeholder="基本单位"
        ></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="form.price" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="料包">
        <el-checkbox v-model="form.liaobao"></el-checkbox>
      </el-form-item>
      <el-form-item label="特殊数量" prop="specNum">
        <el-input-number v-model="form.specNum" :min="1" />
      </el-form-item>
      <el-form-item label="榨菜">
        <el-checkbox v-model="form.zhacai"></el-checkbox>
      </el-form-item>
      <el-form-item label="辣椒油">
        <el-checkbox v-model="form.lajiaoyou"></el-checkbox>
      </el-form-item>
      <el-form-item label="香葱">
        <el-checkbox v-model="form.xiangcong"></el-checkbox>
      </el-form-item>
      <el-form-item label="小馄饨料粉">
        <el-checkbox v-model="form.xiaohuntun"></el-checkbox>
      </el-form-item>
      <el-form-item label="倍数">
        <el-input-number v-model="form.moqTimes" :precision="0" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="起订量">
        <el-input-number v-model="form.moq" :precision="0" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="暂停报货">
        <el-switch v-model="form.stopSell" active-color="#46a6ff" inactive-color="#13ce66" active-text="暂停" inactive-text="开启"></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button style="margin-right: 30px" type="danger" @click="close">
        关闭
      </el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getSpecList } from '@/api/erp'
  export default {
    name: 'StrategyItem',
    props: {
      //分类
      categories: {
        type: Array,
        default: () => {
          return []
        },
      },
    },
    data() {
      var checkCategory = (rule, value, callback) => {
        if (!value.fname) {
          return callback(new Error('请选择物料分类!'))
        }
        callback()
      }

      var checkProduct = (rule, value, callback) => {
        if (!value.fname) {
          return callback(new Error('请选择物料!'))
        }
        callback()
      }

      var checkPrice = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('价格不能为空!'))
        }
        if (isNaN(value)) {
          callback(new Error('请输入数字值!'))
        } else {
          if (value < 0) {
            callback(new Error('请输入正确的价格!'))
          } else {
            callback()
          }
        }
      }

      return {
        form: {
          category: {},
          product: {},
          specName: '',
          price: '',
          fbaseUnitIdfname: '',
          liaobao: false,
          zhacai: false,
          lajiaoyou: false,
          xiangcong: false,
          xiaohuntun: false,
          specNum: 1,
          moqTimes: 0,
          moq: 0,
          stopSell: false
        },
        rowIndex: -1,
        elementLoadingText: false,
        products: [],
        filterProducts: [],
        rules: {
          category: [
            { required: true, trigger: 'blur', message: '请选择分类' },
            { validator: checkCategory, trigger: 'blur' },
          ],
          product: [
            { required: true, trigger: 'blur', message: '请选择物料' },
            { validator: checkProduct, trigger: 'blur' },
          ],
          price: [
            { required: true, trigger: 'blur', message: '请输入价格' },
            { validator: checkPrice, trigger: 'blur' },
          ],
        },
        title: '增加价格策略',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      async showDialog(data, index) {
        //重置
        this.rowIndex = -1

        if (data) {
          this.title = '修改价格策略'
          this.rowIndex = index

          this.form.category = this.$baseLodash.find(this.categories, function (
            o
          ) {
            return o.fid == data.categoryCode && o.fname == data.categoryName
          })

          //获取商品
          await this.selectCategoryFun(this.form.category)

          //设置被选中的商品
          this.form.product = this.$baseLodash.find(this.products, function (
            o
          ) {
            return o.fnumber == data.productCode && o.fname == data.productName
          })

          //设置规则
          this.selectProductFun(this.form.product)

          //设置价格
          this.form.price = data.price
          this.form.liaobao = data.liaobao
          this.form.zhacai = data.zhacai
          this.form.lajiaoyou = data.lajiaoyou
          this.form.xiangcong = data.xiangcong
          this.form.xiaohuntun = data.xiaohuntun
          this.form.specNum = data.specNum
          this.form.specCode = data.specCode
          this.form.specName = data.specName
          this.form.moqTimes = data.moqTimes
          this.form.moq = data.moq
          this.form.stopSell = data.stopSell
        } else {
          this.title = '增加价格策略'
        }

        this.dialogFormVisible = true
      },
      async selectCategoryFun(event) {
        this.elementLoadingText = true
        this.form.product = {}
        this.form.fbaseUnitIdfname = ''
        this.form.specName = ''
        this.products = []
        this.products = await getSpecList(event.fid)
        this.filterProducts = this.products
        this.elementLoadingText = false
      },
      selectProductFun(event) {
        this.form.specName = event.fspecification
        this.form.fbaseUnitIdfname = event.fbaseUnitIdfname
      },
      filterMethod: function (query) {
        if (query != '') {
          this.filterProducts = this.products.filter((item) => {
            return (
              item.fname.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
              item.fnumber.indexOf(query.toLowerCase()) > -1
            )
          })
        } else {
          this.filterProducts = this.products
        }
      },
      visibleChange: function (event) {
        if (event) {
          this.filterProducts = this.products
        }
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.rowIndex >= 0) {
              this.$emit('edit-item', this.form, this.rowIndex)
            } else {
              this.$emit('add-item', this.form)
            }
            this.$baseMessage('价格策略修改成功', 'success')
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-select {
    width: 100% !important;
  }
</style>
